<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../lib/bootstrap-3.3.5-dist/css/bootstrap.min.css">
    <script src="../lib/bootstrap-3.3.5-dist/js/jquery-1.11.3.js"></script>
    <script src="../lib/bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/dengluzhuce.css">

    <!-- <link rel="stylesheet" href="../css/index.css"> -->
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->
    <!-- <link rel="stylesheet" href="../css/shouye.css"> -->
    <!-- <script src="../JavaScript/Highcharts-9.3.2/code/highcharts.js"></script> -->
</head>

<body>
    <div id="denglu">
        <div action="" id="myform">
            <p class="zhucep">欢迎注册</p>
            <p><span>手机号</span><input type="text" name="" id="username" maxlength="6" placeholder="请输入注册的手机号" onkeyup="value=value.replace(/[^\d]/g,'请输入数字') "onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))"></p>
            <div class="xian"></div>
            <p><span>密码</span><input type="password" name="" id="password" placeholder="请输入密码"></p>
            <div class="xian"></div>
            <p class='pwd2'><span>确认密码</span><input type="password" name="" id="password2" placeholder="请再次输入密码"></p>
            <div class="xian"></div>
            <p class='pwd2'><span>昵称</span><input type="text" name="" id="nick" placeholder="请输入昵称"></p>
            <div class="xian"></div>
            <button id="sub" class="subzhu">注册</button>
            <div id="zhuce" class="zhuce2"><a href="">短信验证码登录</a><span>以有账号</span><a href="../denglu.html">登录</a></div>
        </div>
    </div>
    </div>
      <div id="motaikuang"></div>
      <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h4 class="modal-title" id="myModalLabel"></h4>
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>
    <script src="../JavaScript/index.js"></script>
    <script src="../JavaScript/data.js"></script>
    <script>
        let userdata = getmyData('administratorData')
        if (userdata == null) {
            setmyData('administratorData', administratorData)
            userdata = getmyData('administratorData')
        }
        $("#sub").click(function(){
            let user = $('#username').val()
            let pwd = $('#password').val()
            let pwd2 = $('#password2').val()
            let nick = $('#nick').val()
            if(user!=''&&pwd!=''&&pwd2!=''&&nick!=''){
                $('#sub').attr('data-toggle','modal')
            $('#sub').attr('data-target','#myModal')
            }
            for(i=0;i<userdata.length;i++){
                if(userdata[i].account==user){
                    $("#myModalLabel").text('该账号已注册')
                    break
                }else{
                    if(pwd==pwd2){
                        $("#myModalLabel").text('注册成功')
                        let mynewuser={}
                        mynewuser.account=user
                        mynewuser.pwd=pwd
                        mynewuser.nickName=nick
                        userdata.push(mynewuser)
                        setmyData('administratorData',userdata)
                        break
                    }else{
                        $("#myModalLabel").text('注册失败，输入的两次密码冲突')
                        break
                    }
                }
            }
        })
        $('#denglu').css({
            height: $(window).height() + 'px'
        })
        $('#myform').css({
            top: ($(window).height() - $('#myform').height()) / 2 + 'px'
        })
        $('#zhuce span').css({
            left: $("#zhuce").width() - $('#zhuce a:nth-of-type(2)').width() - 20 + 'px'
        })
    </script>
</body>

</html>